<template>
  <div>
    <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                background="#ababab"
                :interval="4000"
                img-width="1024"
                img-height="480"
    >

      <!-- Text slides with image -->
      <b-carousel-slide caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="http://www.xinde.org/uploadfile/thumb/thumb_640_400_20181213101717915.jpeg"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="http://www.xinde.org/uploadfile/thumb/thumb_640_400_20181213101717915.jpeg">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="http://www.xinde.org/uploadfile/thumb/thumb_640_400_20181213101717915.jpeg">
      </b-carousel-slide>

     

      
    </b-carousel>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>